<template>
  <div style="width: 900px; margin: auto">
    <el-card> 个人信息 </el-card>
    <el-card>
      <el-form ref="form1" :model="form1" label-width="80px">
        <el-form-item label="姓名:">
          <el-input
            id="inputDeep"
            v-model="form1.nickName"
            type="text"
            placeholder="姓名"
            style="width: 150px"
            maxlength="10"
            show-word-limit
            v-if="seen"
          ></el-input>
          <span v-else>{{ form1.nickName }}</span>
        </el-form-item>
        <el-form-item label="性别:">
          <el-radio-group v-model="form1.sex" v-if="seen">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
          <span v-else>{{ form1.sex }}</span>
        </el-form-item>
        <el-form-item label="出生日期:">
          <el-col :span="11" v-if="seen">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form1.birthday"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <span v-else>{{ getDate(form1.birthday) }}</span>
        </el-form-item>

        <el-form-item label="联系电话:">
          <el-input
            type="input"
            v-model="form1.telephone"
            v-if="seen"
            style="width: 200px"
          ></el-input>
          <span v-else>{{ form1.telephone }}</span>
        </el-form-item>
        <el-form-item label="邮箱地址:">
          <el-input
            type="input"
            v-model="form1.dzyx"
            v-if="seen"
            style="width: 200px"
          ></el-input>
          <span v-else>{{ form1.dzyx }}</span>
        </el-form-item>
        <el-form-item label="家庭住址:">
          <el-input
            type="textarea"
            v-model="form1.address"
            v-if="seen"
          ></el-input>
          <span v-else>{{ form1.address }}</span>
        </el-form-item>

        <el-form-item label="自我介绍:">
          <el-input
            type="textarea"
            v-model="form1.selfIntroduction"
            v-if="seen"
          ></el-input>
          <span v-else>{{ form1.selfIntroduction }}</span>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="useredit" v-if="!this.seen">
            编辑</el-button
          >
          <el-button type="primary" @click="usersave" v-else>保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import common from "../util/common";
import { getUserById, editUserInfo } from "../api/user";
export default {
  data() {
    return {
      getDate: common.getDate,
      form1: {
        nickName: "",
        sex: "",
        birthday: "",
        address: "",
        selfIntroduction: "",
        telephone: "",
        dzyx: "",
      },
      seen: false,
    };
  },
  methods: {
    //点击编辑效果
    useredit() {
      this.seen = !this.seen;
      if (this.seen) {
        this.seen = true;
      } else {
        this.seen = false;
      }
    },
    //保存编辑效果并把个人资料传入后端数据库
    usersave() {
      //   this.form1.birthday = common.getDate(this.form1.birthday);
      var id = localStorage.getItem("userId");
      editUserInfo(id, this.form1).then(({ data }) => {
        console.log(data);
        this.form1 = data.data
      });

      this.seen = false;
    },
    //个人简介
    drawers() {
      var id = localStorage.getItem("userId");
      getUserById(id).then(({ data }) => {
        this.form1 = data.data;
      });
    },
  },
  mounted() {
    this.drawers();
  },
};
</script>

<style>
</style>